<template>
    <a-menu
        v-if="menuMode == 'inline'"
        :inlineIndent="12"
        mode="inline"
        :open-keys="openKeys"
        :inline-collapsed="collapsed"
        :default-selected-keys="[$route.path]"
        :selected-keys="[currentKey]"
        @click="clickMenu"
        @openChange="handleOpenChange"
        class="menu-wrapper inline-menu"
    >
        <template v-for="item in menus">
            <a-menu-item v-if="!item?.children.length" :key="item.path">
                <a-icon class="menu-icon" :type="item.meta?.icon" />
                <span class="menu-label">{{ item.meta?.title }}</span>
            </a-menu-item>
            <a-sub-menu v-else :key="item.path">
                <div slot="title">
                    <a-icon class="menu-icon" :type="item.meta?.icon" />
                    <span class="menu-label">{{ item.meta?.title }}</span>
                </div>
                <a-menu-item
                    v-for="childItem in item.children"
                    :key="childItem.path"
                >
                    <a-icon class="menu-icon" :type="childItem.meta?.icon" />
                    <span class="menu-label">{{ childItem.meta?.title }}</span>
                </a-menu-item>
            </a-sub-menu>
        </template>
    </a-menu>

    <a-menu
        v-else
        v-model="lightCurrent"
        mode="horizontal"
        @click="clickMenu"
        @openChange="handleOpenChange"
        class="menu-wrapper horizontal-menu"
    >
        <template v-for="item in menus">
            <a-menu-item v-if="!item?.children.length" :key="item.path">
                <a-icon class="menu-icon" :type="item.meta?.icon" />
                <span class="menu-label">{{ item.meta?.title }}</span>
            </a-menu-item>
            <a-sub-menu v-else :key="item.path">
                <div slot="title">
                    <a-icon class="menu-icon" :type="item.meta?.icon" />
                    <span class="menu-label">{{ item.meta?.title }}</span>
                </div>
                <a-menu-item
                    v-for="childItem in item.children"
                    :key="childItem.path"
                >
                    <a-icon class="menu-icon" :type="childItem.meta?.icon" />
                    <span class="menu-label">{{ childItem.meta?.title }}</span>
                </a-menu-item>
            </a-sub-menu>
        </template>
    </a-menu>
</template>
<script>
import store from "@/store";
import { mapGetters } from "vuex";

export default {
    name: "menusComponent",
    props: {},
    data() {
        return {
            collapsed: false,
            currentKey: "",
            openKeys: [], // 初始展开的菜单
            menus: [],
            lightCurrent: [],
        };
    },
    computed: {
        ...mapGetters(["menuMode"]),
    },
    created() {
        this.filterMenu();
    },
    mounted() {
        this.matchMenuItem();
    },
    watch: {
        $route(to, from) {
            console.log(to, from);
        },
    },
    methods: {
        // 过滤菜单
        filterMenu() {
            const { addRoutes } = store.state.permission;
            this.menus = addRoutes[0].children;
        },
        // 页面刷新时当前路由与菜单高亮项同步匹配
        matchMenuItem() {
            const route = this.$route;
            this.currentKey = route.path;
            this.lightCurrent = [route.path];
        },
        // 菜单点击事件
        clickMenu(e) {
            const path = e.key;
            this.currentKey = path;
            // this.lightCurrent = [path];
            this.lightCurrent.push(path);
            this.$router.push({ path });
        },
        handleOpenChange(openKeys) {
            this.openKeys = openKeys;
        },
    },
};
</script>
<style lang="less" scoped>
::v-deep .ant-menu-submenu > .ant-menu {
    background: var(--main-body-bg-color) !important;
}
.menu-wrapper {
    border-right: none;
    color: #fff !important;
    background-color: var(--main-body-bg-color) !important;
    // ::v-deep .ant-menu {
    //   background-color: var(--main-body-bg-color) !important;
    // }
    ::v-deep .ant-menu-submenu-title {
        &:hover {
            color: #fff;
            //   background-color: #0aa679;
            background-color: var(--side-menu-bg-color);
        }
    }
    ::v-deep .ant-menu-submenu-active {
        .ant-menu-submenu-arrow {
            &::before,
            &::after {
                background-color: #fff;
                background-image: none;
            }
        }
    }
    ::v-deep .ant-menu-submenu-selected {
        // color: #0aa679;
        color: var(--side-menu-bg-color);
        .ant-menu-submenu-arrow {
            &::before,
            &::after {
                // background-color: #0aa679;
                background-color: var(--side-menu-bg-color);
            }
        }
    }
    ::v-deep .ant-menu-submenu-arrow {
        &::before,
        &::after {
            background-image: none;
            background-color: #fff;
        }
    }
    ::v-deep .ant-menu-item {
        // margin: 0;
        // width: 100%; // 不可设置宽度否则横向布局被挤压，仅在竖向布局时设置
        color: #fff;
        // background-color: #082254;
        background-color: var(--main-body-bg-color);
        &:hover {
            color: #fff;
            //   background-color: #0aa679;
            background-color: var(--side-menu-bg-color);
        }
        &::after {
            border-right: 0;
        }
    }
    ::v-deep .ant-menu-item-selected {
        // background-color: #0aa679;
        background-color: var(--side-menu-bg-color);
    }
}
.inline-menu {
    ::v-deep .ant-menu-item {
        width: 100% !important;
    }
    ::v-deep .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
    ::v-deep .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
        background-color: #fff !important;
    }
}
.horizontal-menu {
    ::v-deep .ant-menu:not(.ant-menu-horizontal).ant-menu-item-selected {
        // background-color: #0aa679;
        background-color: var(--side-menu-bg-color);
        color: #fff;
    }
    ::v-deep .ant-menu-item-active {
        &:hover {
            color: #fff;
            //   border-bottom-color: #0aa679;
            border-bottom-color: var(--side-menu-bg-color);
        }
    }
    ::v-deep .ant-menu-item.ant-menu-item-selected {
        // color: #0aa679;
        // border-bottom-color: #0aa679;
        color: var(--side-menu-bg-color);
        border-bottom-color: var(--side-menu-bg-color);
        background-color: transparent;
    }
    ::v-deep
        .ant-menu-submenu.ant-menu-submenu-horizontal.ant-menu-submenu-selected {
        // border-bottom-color: #0aa679;
        color: var(--side-menu-bg-color);
        border-bottom-color: var(--side-menu-bg-color);
    }
    ::v-deep .ant-menu-submenu-open {
        // border-bottom-color: #0aa679;
        // color: #0aa679;
        border-bottom-color: var(--side-menu-bg-color);
        color: var(--side-menu-bg-color);
    }
    ::v-deep .ant-menu-submenu {
        &:hover {
            background-color: var(--side-menu-bg-color);
        }
    }
    ::v-deep .ant-menu-item {
        &:hover {
            color: #fff !important;
            background-color: var(--side-menu-bg-color) !important;
        }
    }
}
.menu-label {
    font-weight: 500;
    font-size: 14px;
}
.menu-icon {
    margin-right: 8px;
    font-size: 12px;
}
</style>
